<template>
	<view class="bg-color">
		<uni-popup ref="popup" @maskClick="close" type="bottom" border-radius="32rpx 32rpx 0 0">
			<view class="popups">
				<view class="main">
					<view class="mainWrap">
						<view @tap="navTo(index)" v-for="(item,index) in moreList" :key="index" class="wrap">
							<image class="moreImg" :src="item.url"></image>
							<text class="moreText">{{item.name}}</text>
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="report" type="bottom" border-radius="32rpx 32rpx 0 0">
			<view class="reportPopup">
				<view class="popupMian">
					<view class="popupTitle">
						<view></view>
						<text style="color: #262626;font-size: 32rpx;font-weight: bold;">举报</text>
						<image @tap="reportClose" style="width: 21rpx;height: 21rpx;" src="../../static/img/close.png">
						</image>
					</view>
					<view class="reportTitle">
						<text>举报原因</text>
					</view>
					<view class="reportTypeWrap">
						<view @tap="chooseReport(index)" v-for="(item,index) in reportTypeList" :key="index"
							class="reportType" :class="{beReportType:chooseReportIndex==index}">
							{{item.name}}
						</view>
					</view>
					<view class="reportTitle" style="margin-top: 32rpx;">
						<text>举报描述（选填）</text>
					</view>
					<textarea class="reportInput" placeholder="请描述具体违规清空，便于平台准确判断和处理"
						placeholder-style="font-size:28rpx;color:#8C8C8C;" v-model="reportContent" maxlength="500" />
					<view class="reportTitle" style="margin-top: 32rpx;">
						<text>上传凭证</text>
						<text style="font-size: 28rpx;">{{reportImgList.length}}/3</text>
					</view>
					<view class="reportImgWrap">
						<image v-for="(item,index) in reportImgList" :key="index" class="reportImgs" :src="item">
						</image>
						<view v-if="reportImgList.length<3" @tap="addReportImg" class="reportImgs">
							<image style="width: 72rpx;height: 72rpx;margin-top: 44rpx;"
								src="../../static/img/xiangjiji.png"></image>
							<text style="font-size: 24rpx;color: #C4C4C4;margin-top: 12rpx;">上传图片</text>
						</view>
					</view>
					<view @tap="openReportRecord" class="reportRecord">
						<text style="color: #262626;font-size: 28rpx;font-weight: bold;">举报记录</text>
						<image style="width: 32rpx;height: 32rpx;margin-left: 8rpx;"
							src="../../static/img/chevronRight.png"></image>
					</view>
				</view>
				<view class="reportSbumits">
					<view @tap="toReport" class="reportSbumit">
						<text style="color: #fff;font-size: 32rpx;font-weight: bold;">提交</text>
					</view>
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="reportRecordPopup" type="bottom" border-radius="32rpx 32rpx 0 0">
			<view class="reportPopup">
				<view class="popupMian">
					<view class="popupTitle">
						<view></view>
						<text
							style="color: #262626;font-size: 32rpx;font-weight: bold;">举报记录({{reportRecordTotal}})</text>
						<image @tap="reportRecordClose" style="width: 21rpx;height: 21rpx;"
							src="../../static/img/close.png">
						</image>
					</view>
				</view>
				<scroll-view scroll-y="true" @scrolltolower="scrollReport" class="reportPopupWrap">
					<view v-for="(item,index) in reportRecordList" :key="index" class="reportCard">
						<view class="reportCardTitle">
							<text>举报原因：{{reportTypeList.find(it => it.key == item.reportType)?.name}}</text>
						</view>
						<view class="reportCardTitle">
							<text>是否处理：{{item.handleFlag=='PROCESSED'?'已处理':'未处理'}}</text>
						</view>
						<view v-if="item.description" class="reportCardContent">举报描述：{{item.description}}</view>
						<view v-if="item.attachmentIds" class="reportCardImgWrap">
							<image v-for="(a,b) in item.attachmentIds.split(',')" :key="b" class="reportCardImg"
								:src="`${httpUrl}/app/file/viewFile?fileId=${a}`">
							</image>
						</view>
					</view>
				</scroll-view>
			</view>
		</uni-popup>
		<uni-popup ref="hongbao" type="bottom" border-radius="32rpx 32rpx 0 0">
			<view class="reportPopup" style="height: 914rpx;">
				<view class="popupMian">
					<view class="popupTitle">
						<view></view>
						<text style="color: #262626;font-size: 32rpx;font-weight: bold;">红包卡</text>
						<image @tap="hongbaoCloses" style="width: 21rpx;height: 21rpx;"
							src="../../static/img/close.png">
						</image>
					</view>
					<view class="reportTitle">
						<text style="font-size: 28rpx;font-weight: normal;">余额：{{diamondBalance}}钻</text>
						<text @tap="toChong" style="font-size: 28rpx;color: #6B64D3;">充值</text>
					</view>
					<view class="reportTitle" style="margin-top: 32rpx;">
						<text>红包个数</text>
					</view>
					<view style="position: relative;">
						<input class="reportInputWrap" placeholder="请输入数量" type="number"
							placeholder-style="font-size:28rpx;color:#BFBFBF;" v-model="hongbaoNum" />
						<view
							style="position: absolute;right: 32rpx;top:0;height: 90rpx;display: flex;align-items: center;">
							<text style="color: #262626;font-size: 28rpx;">个</text>
						</view>
					</view>
					<view class="reportTitle" style="margin-top: 32rpx;">
						<text>红包金额</text>
					</view>
					<view style="position: relative;">
						<input class="reportInputWrap" placeholder="请输入金额" type="number"
							placeholder-style="font-size:28rpx;color:#BFBFBF;" v-model="hongbaoVal" />
						<view
							style="position: absolute;right: 32rpx;top:0;height: 90rpx;display: flex;align-items: center;">
							<text style="color: #262626;font-size: 28rpx;">钻</text>
						</view>
					</view>
					<view style="color: #8C8C8C;font-size: 28rpx;font-weight: bold;margin-top: 32rpx;">点赞，评论可参与红包抽奖
					</view>
					<view @tap="openHongbao" class="reportRecord">
						<text style="color: #262626;font-size: 28rpx;font-weight: bold;">红包记录</text>
						<image style="width: 32rpx;height: 32rpx;margin-left: 8rpx;"
							src="../../static/img/chevronRight.png"></image>
					</view>
				</view>
				<view class="reportSbumits">
					<view @tap="toHongbao" class="reportSbumit">
						<text style="color: #fff;font-size: 32rpx;font-weight: bold;">立即支付</text>
					</view>
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="hongbaoPop" type="bottom" border-radius="32rpx 32rpx 0 0">
			<view class="reportPopup">
				<view class="popupMian">
					<view class="popupTitle">
						<view></view>
						<text style="color: #262626;font-size: 32rpx;font-weight: bold;">红包记录({{hongbaoTotal}})</text>
						<image @tap="hongbaoClose" style="width: 21rpx;height: 21rpx;" src="../../static/img/close.png">
						</image>
					</view>
				</view>
				<scroll-view scroll-y="true" @scrolltolower="scrollHongbao" class="reportPopupWrap">
					<view v-for="(item, index) in hongbaoList" :key="index" class="hongbao-card">
						<view class="card-content">
							<view class="card-title">墙墙：{{item.trendsTitle}}</view>
							<view class="card-item">
								<text class="label">编号：</text>
								<text class="value">{{ item.redNumber }}</text>
							</view>
							<view class="card-item">
								<text class="label">类型：</text>
								<text class="value">{{ item.redType.name }}</text>
							</view>
							<view class="card-item">
								<text class="label">总金额：</text>
								<text class="value money">{{ item.redAmount }}</text>
							</view>
							<view class="card-item">
								<text class="label">总数量：</text>
								<text class="value">{{ item.redCount }}</text>
							</view>
							<view class="card-item">
								<text class="label">剩余金额：</text>
								<text class="value money">{{ item.balanceAmount }}</text>
							</view>
							<view class="card-item">
								<text class="label">剩余数量：</text>
								<text class="value">{{ item.balanceCount }}</text>
							</view>
							<view class="card-item">
								<text class="label">发送时间：</text>
								<text class="value">{{ item.createTime }}</text>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</uni-popup>
	</view>
</template>

<script setup lang="ts">
	import { ref } from 'vue'
	import { onLoad,onShow } from '@dcloudio/uni-app'
	import { setDialogView } from '@/utils/dialogView.ts'
	import { saveReportInfo, getReportList, userWallet, buyRedEnvelope, redEnvelopeList } from '@/utils/api/index.ts'
	const httpUrl = ref(getApp().globalData.baseUrl)
	// 关闭返回
	const close = () => {
		uni.navigateBack()
	}
	const moreList = ref([{
		name: '转发',
		url: '../../static/img/more1.png'
	}, {
		name: '举报',
		url: '../../static/img/more2.png'
	}, {
		name: '海报',
		url: '../../static/img/more3.png'
	}, {
		name: '上热门',
		url: '../../static/img/more4.png'
	}, {
		name: '红包',
		url: '../../static/img/more5.png'
	}, {
		name: '上头条',
		url: '../../static/img/more6.png'
	}])
	// 举报
	const reportTypeList = ref([{
		name: '违法犯罪',
		key: 'CRIME'
	}, {
		name: '涉嫌诈骗',
		key: 'FRAUD'
	}, {
		name: '低俗恶搞',
		key: 'VULGAR'
	}])
	onShow(()=>{
		uni.$once('successful',()=>{
			getBalance()
		})
	})
	const chooseReportIndex = ref<number | null>(null)
	const chooseReport = (index : number) => {
		chooseReportIndex.value = index
	}
	const reportImgList = ref<any>([])  //举报图片
	//选择举报图片
	const addReportImg = () => {
		setDialogView('READ_EXTERNAL_STORAGE').then(res=>{
			if(res == 1){
				uni.chooseImage({
					count: 3 - reportImgList.value.length,
					sourceType: ["album"],
					success: (chooseImageRes) => {
						if (reportImgList.value.length + chooseImageRes.tempFilePaths.length > 9) {
							uni.showToast({
								title: '最多上传3张图片',
								icon: 'none'
							});
						} else {
							reportImgList.value.push(...chooseImageRes.tempFilePaths)
						}
					}
				});
			}
		})
		
	}
	const reportContent = ref('')  //举报文字内容
	// 提交举报
	const toReport = async () => {
		if (chooseReportIndex.value == null) {
			uni.showToast({
				title: '请选择举报原因',
				icon: 'none'
			})
			return
		}
		uni.showLoading({
			title: '举报上传中...',
			mask: true
		})
		const uploadPromises = reportImgList.value.map((item : any) => {
			return uni.uploadFile({
				url: `${getApp().globalData.baseUrl}/app/file/uploadFile`,
				filePath: item,
				name: 'file'
			});
		});
		const results = await Promise.all(uploadPromises)
		const dataResults = results.map(result => JSON.parse(result.data).data.fileId).join(',');
		const data = {
			reportType: reportTypeList.value[chooseReportIndex.value].key,
			description: reportContent.value,
			attachmentIds: dataResults,
		}
		await saveReportInfo({ data: { appReport: data } })
		uni.hideToast();
		uni.showToast({
			title: '举报成功',
			icon: 'none'
		})
		setTimeout(()=>{
			uni.navigateBack()
		},500)
	}
	// 打开举报记录
	const reportRecordPopup = ref<InstanceType<typeof Popup> | null>(null);
	const reportRecordList = ref<any>([])
	const reportRecordPageNo = ref(0)
	const reportRecordTotal = ref(0)
	const getReportRecordList = async () => {
		reportRecordPageNo.value++
		const data = {
			id: id.value,
			pageNo: reportRecordPageNo.value,
			pageSize: 6
		}
		const res = await getReportList({ data: data })
		reportRecordTotal.value = res.data.total
		if (reportRecordPageNo.value == 1) {
			reportRecordList.value = res.data.list
		} else {
			if (res.data.list.length > 0) {
				reportRecordList.value.push(...res.data.list)
			}
		}
	}
	const openReportRecord = async () => {
		reportRecordPageNo.value = 0
		await getReportRecordList()
		reportRecordPopup.value.open('bottom')
	}
	const scrollReport = () => {
		getReportRecordList()
	}
	// 关闭举报记录
	const reportRecordClose = () => {
		reportRecordPopup.value.close()
	}
	// 选择功能模块
	const navTo = (index : number) => {
		if (index == 0) {
			uni.redirectTo({
				url: `/pages/qiangqiang/relay?id=${id.value}`
			})
		}
		if (index == 1) {
			report.value.open('bottom')
		}
		if (index == 2) {
			uni.redirectTo({
				url: `/pages/qiangqiang/poster?id=${id.value}`
			})
		}
		if (index == 3) {
			uni.redirectTo({
				url: `/pages/qiangqiang/hot?id=${id.value}`,
				animationType: 'slide-in-bottom',
				animationDuration: 350
			})
		}
		if (index == 4) {
			getBalance()
			hongbao.value.open('bottom')
		}
		if (index == 5) {
			uni.redirectTo({
				url: `/pages/qiangqiang/Headlines?id=${id.value}&avatar=${avatar.value}&userName=${userName.value}`,
				animationType: 'slide-in-bottom',
				animationDuration: 350
			})
		}
	}
	const popup = ref<InstanceType<typeof Popup> | null>(null);
	const report = ref<InstanceType<typeof Popup> | null>(null);
	const hongbao = ref<InstanceType<typeof Popup> | null>(null);
	const avatar = ref();
	const userName = ref();
	const reportClose = () => {
		report.value.close()
	}
	// 红包
	const hongbaoNum = ref('')
	const hongbaoVal = ref('')
	const diamondBalance = ref('0')
	const getBalance = async () => {
		const e = await userWallet()
		diamondBalance.value = e.data.diamondBalance
	}
	const toHongbao = async () => {
		if(hongbaoVal.value>diamondBalance.value){
			uni.showModal({
				title:'提示',
				content:'当前钻石不足，是否跳转充值?',
				success:(e)=>{
					if(e.confirm){
						toChong()
					}
				}
			})
			return;
		}
		const data = {
			trendsId: id.value, //墙墙id
			diamondAmount: hongbaoVal.value, //红包金额钻石
			diamondCount: hongbaoNum.value //红包个数
		}
		await buyRedEnvelope({ data: data })
		// uni.$emit('updateRedEnvelope',id.value)
		uni.showToast({
			title: '发送成功',
			icon: 'none'
		});
		setTimeout(() => {
			uni.navigateBack()
		}, 500)
	}
	const hongbaoPop = ref<InstanceType<typeof Popup> | null>(null);
	const hongbaoPageNo = ref(0)
	const hongbaoTotal = ref(0)
	const hongbaoList = ref<any>([])
	const getHongbaoList = async () => {
		hongbaoPageNo.value++
		const data = {
			pageNo: hongbaoPageNo.value,
			pageSize: 10
		}
		const res = await redEnvelopeList({ data: data })
		hongbaoTotal.value = res.data.total
		if (hongbaoPageNo.value == 1) {
			hongbaoList.value = res.data.list
		} else {
			if (res.data.list.length > 0) {
				hongbaoList.value.push(...res.data.list)
			}
		}
	}
	const openHongbao = async () => {
		hongbaoPageNo.value = 0
		await getHongbaoList()
		hongbaoPop.value.open('bottom')
	}
	const hongbaoClose = () => {
		hongbaoPop.value.close()
	}
	const hongbaoCloses = () => {
		hongbao.value.close()
	}
	const scrollHongbao = () => {
		getHongbaoList()
	}
	// 充值
	const toChong = () => {
		uni.navigateTo({
			url: `/pages/qiangqiang/recharge?id=${id.value}`,
			animationType: 'slide-in-bottom',
			animationDuration: 250
		})
	}
	const id = ref('')
	onLoad(async (option) => {
		id.value = option.id
		userName.value = option.userName
		avatar.value = option.avatar
		setTimeout(() => {
			popup.value.open('bottom')
		}, 80)
	})
</script>

<style>
	page {
		background: transparent;
	}

	.bg-color {
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: transparent;
	}

	.popups {
		width: 100%;
		height: 450rpx;
		background: #F4F6FA;
		border-radius: 24rpx 24rpx 0rpx 0rpx;
	}

	.main {
		width: 100%;
		height: 420rpx;
		display: flex;
		justify-content: center;
	}

	.mainWrap {
		width: 522rpx;
		height: 420rpx;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
	}

	.wrap {
		width: 150rpx;
		height: 150rpx;
		margin-top: 48rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
	}

	.moreImg {
		width: 86rpx;
		height: 86rpx;
	}

	.moreText {
		color: #262626;
		font-size: 28rpx;
		margin-top: 12rpx;
	}

	.reportPopup {
		width: 100%;
		height: 1150rpx;
		background: #FFFFFF;
		border-radius: 24rpx 24rpx 0rpx 0rpx;
	}

	.popupMian {
		width: 94%;
		margin-left: 3%;
		position: relative;
	}

	.popupTitle {
		width: 100%;
		height: 104rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.reportTitle {
		width: 100%;
		height: 54rpx;
		font-size: 36rpx;
		color: #262626;
		font-weight: bold;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.reportTypeWrap {
		width: 100%;
		margin-top: 32rpx;
		display: flex;
		flex-wrap: nowrap;
	}

	.reportType {
		width: 159rpx;
		height: 66rpx;
		background: #F4F6FA;
		border-radius: 12rpx;
		margin-right: 32rpx;
		font-size: 28rpx;
		color: #262626;
		font-weight: bold;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.beReportType {
		background: #FFDED3;
		color: #FF263F;
	}

	.reportInput {
		width: 100%;
		height: 160rpx;
		background: #F4F6FA;
		border-radius: 24rpx;
		margin-top: 32rpx;
		padding-top: 10rpx;
		padding-left: 32rpx;
		line-height: 42rpx;
	}

	.reportInputWrap {
		width: 100%;
		height: 90rpx;
		background: #F4F6FA;
		border-radius: 24rpx;
		margin-top: 24rpx;
		padding-top: 10rpx;
		padding-left: 32rpx;
	}

	.reportImgWrap {
		width: 100%;
		margin-top: 24rpx;
		display: flex;
	}

	.reportImgs {
		width: 200rpx;
		height: 200rpx;
		background: #F4F6FA;
		border-radius: 12rpx;
		margin-right: 28rpx;
		display: flex;
		align-items: center;
		flex-direction: column;
	}

	.reportRecord {
		width: 199rpx;
		height: 66rpx;
		border-radius: 33rpx;
		border: 2rpx solid #CCCCCC;
		margin-top: 32rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.reportSbumits {
		width: 100%;
		height: 113rpx;
		border-top: 2rpx solid #F0F0F0;
		margin-top: 32rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.reportSbumit {
		width: 638rpx;
		height: 88rpx;
		background: #FF263F;
		border-radius: 264rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.reportPopupWrap {
		width: 100%;
		height: 1046rpx;
	}

	/* 卡片整体样式 */
	.reportCard {
		background-color: #ffffff;
		/* 白色背景 */
		border: 1px solid #ddd;
		/* 浅灰色边框 */
		border-radius: 8px;
		/* 圆角 */
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
		/* 阴影 */
		margin: 16px;
		/* 外边距 */
		padding: 16px;
		/* 内边距 */
		overflow: hidden;
		/* 隐藏溢出内容 */
		transition: transform 0.2s, box-shadow 0.2s;
		/* 平滑过渡效果 */
	}

	/* 卡片标题样式 */
	.reportCardTitle {
		font-size: 18px;
		/* 字体大小 */
		font-weight: bold;
		/* 加粗 */
		margin-bottom: 8px;
		/* 下外边距 */
		color: #333;
		/* 深灰色文字 */
	}

	/* 卡片内容样式 */
	.reportCardContent {
		font-size: 16px;
		/* 字体大小 */
		color: #666;
		/* 中灰色文字 */
		margin-bottom: 16px;
		/* 下外边距，用于与图片区域分隔 */
	}

	/* 图片包裹器样式 */
	.reportCardImgWrap {
		display: flex;
		/* 弹性布局 */
		flex-wrap: wrap;
		/* 允许换行 */
		gap: 8px;
		/* 图片之间的间距 */
	}

	.reportCardImg {
		width: 200rpx;
		height: 200rpx;
	}

	.hongbao-card {
		background-color: #fff;
		border-radius: 12px;
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
		width: 93%;
		/* 根据容器自动调整宽度，但不超过最大宽度 */
		margin-left: 4%;
		overflow: hidden;
		/* 防止内容溢出 */
		margin-bottom: 24rpx;
	}

	.card-content {
		padding: 16px;
	}

	.card-title {
		font-size: 18px;
		font-weight: bold;
		margin-bottom: 16px;
		color: #333;
	}

	.card-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 8px;
		color: #666;
	}

	.label {
		font-size: 14px;
		font-weight: bold;
		color: #999;
		min-width: 60px;
		/* 设置最小宽度以确保标签对齐 */
	}

	.value {
		font-size: 16px;
		color: #333;
	}

	.money {
		color: #ff6347;
		/* 特定颜色用于金额 */
	}
</style>